<template>
    <div class="lb-button">
      <button class="lb-b-btn">按钮</button>
      <p>一个扩展性和维护性都很强的按钮</p>
      <div class="lb-b-triangle">
        <div class="lb-b-tooltip" @click="tio">
          我是一个带小三角形的提示框{{mm}}<!--{{value}}-->
        </div>
      </div>
    </div>
</template>
<style lang="less" scoped>
  .lb-button {
    display: inline-block;
    button {
      font-size: 100%;
      line-height: 1.5;
      padding: .3em .8em;
      border: 1px solid rgba(0,0,0,.1);
      background: #1E90FF linear-gradient(hsla(0,0%,100%,.2),transparent);
      border-radius: .2em;
      box-shadow: 0 .05em .25em rgba(0,0,0,.5);
      color: #fff;
      text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
      cursor: pointer;
    }
    p {
      margin-top: 40px;
      color: red;
      font-size: 200%;
    }
    .lb-b-triangle {
      margin-top: 60px;
    }
    .lb-b-tooltip {
      position: absolute;
      padding: .4em .6em;
      font-size: 100%;
      border: 1px solid rgba(0,0,0,.1);
      background: #FFDEAD;
      border-radius: .2em;
      box-shadow: .05em .05em .5em rgba(0,0,0,.4);
      color: #575757;
      &::before {
        position: absolute;
        content: '';
        padding: .35em;
        top: -.4em;
        left: 1em;
        background: inherit;
        border: inherit;
        border-right: 0;
        border-bottom: 0;
        transform: rotate(45deg);
      }
    }
  }
</style>
<script>
  export default {
    name: 'lb-button',
    props: {
      cs: [Number, String, Array, Object]
    },
    inject: {
      /*getValue: {
        from: 'getVal'
      },*/
      /*value: {
        from: 'll'
      }*/
    },
    data () {
      return {
        mm: 1,
        d: {
         c: 3
        },
        res: {
         /* kk: 2*/
        },
      }
    },
    methods: {
      tio () {
        this.getValue();
      },
    },
    computed: {
      kk () {
        return this.mm
      }
    },
    watch: {
      'd.c': {
        handler: function (val, oldVal) {

        },
        immediate: true
      },
    },
    mounted () {
      console.log(this)
      //this.cs = 8
    },
    beforeCreate () {
      console.log(this)
    },
    activated () {
      console.log('activated')
    },
    created () {
     /* function mm() {

      }
      console.dir(mm.constructor.prototype === mm.__proto__)*/
      /*let val = {
        kk: 2
      }
      console.log(Object.prototype.hasOwnProperty.call(val, 'toString'))*/
      (this.res['kk'] || (this.res['kk'] = [])).push(2)
      //console.log(this.res)
    }
  }
</script>
